<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function fun1() {
            console.log("单击了")
        }
        function fun2() {
            console.log("this is 马牛逼！！！")
        }
        function fun3() {
            console.log("双击了")
        }
        function fun4() {
            console.log("屏幕截图（鼠标悬停）")
        }
        function fun5() {
            console.log("鼠标移动了")
        }
        function fun6() {
            console.log("鼠标离开了")
        }
        function fun7(){
            console.log("键盘的按键按下了")
        }
        function fun8(){
            console.log("键盘的按键抬起了")
        }
        function testFocus(){
            console.log("获得焦点了")
        }
        function testBlur(){
            console.log("失去焦点了")
        }
        function testChange(value){
            console.log("内容改变为"+value)
        }
        function testChange2(value){
            console.log("选项改变为"+value)  
        }
        function testSubmit(){
            /*
            弹窗的三种方式
            alert()信息提示框
            prompt()信息输入框
            confirm()信息确认框
            */
            // alert("提交成功！")
            //在这里我们有机会阻止表单的提交
           var flag = confirm("确定要提交表单吗？")
            if (flag==false){
                return false
            }
                //event.preventDefault();  //阻止组件的默认行为
            return true
        }
        function testReset(){
            var falg = confirm("确定要重置表单吗？")
            if(falg){
                return true
            }
            return false
        }

        /*
        1.事件的绑定方式
            （1）通过元素的属性绑定     on***
            （2）通过DOM编程动态绑定    
        
            注意事项
                (1)一个时间可以同时绑定多个函数
                (2)一个元素可以同时绑定多个事件
        
        2.常见的事件
            (1)鼠标事件     onclick(单击) ondbclick(双击) onmouseover(悬停) onmousemove(移动) onmouseleave(离开)
            (2)键盘事件     onkeydown(按下) onkeyup(抬起)
            (3)表单事件     onfocus(获得焦点) onblur(失去焦点) onchange(内容改变) onsubmit(提交表单事件) onreset(重置表单事件)
            (4)页面加载事件 onload(页面加载事件)
        3.事件的触发
            (1)行为触发
            (2)DOM编程触发
        */  

    </script>
</head>

<body>
    <input type="button" 
    value="按钮" 
    onclick="fun1(),fun2()" 
    ondblclick="fun3()">
    <hr>
    <img src="img/屏幕截图 2025-03-16 184046.png" 
    height="50px" width="60px" 
    onmouseover="fun4()" 
    onmousemove="fun5()"
    onmouseleave="fun6()">
    <hr>
    <input type="text" 
    onkeydown="fun7()" 
    onkeyup="fun8()">
    <hr>
    <form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="return testReset()">
        用户名：<input type="text" name="realName" onfocus="testFocus()" onblur="testBlur()" onchange="testChange(this.value)"><br>
        登陆账号：<input type="text" name="logoinName" onfocus="testFocus()" onblur="testBlur()" onchange="testChange(this.value)"><br>
        选择籍贯：<select name="" id="" onchange="testChange2(this.value)">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="submit" value="注册">
        <input type="reset" value="重置">
    </form>
</body>

</html>